@use "sass:color";
@import "normalize.css/normalize";
@import "./mixins";
@import "./code";
@import "./heading-anchor";
@import "./nprogress";

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

:root {
  font-size: $font-size-base;

  @media (max-width: $lg) {
    font-size: $font-size-base * 0.95;
  }

  @media (max-width: $md) {
    font-size: $font-size-base * 0.9;
  }

  @media (max-width: $sm) {
    font-size: $font-size-base * 0.85;
  }
}

body, input {
  font-family: Roboto, sans-serif;
  font-weight: 300;
  line-height: $line-height-base;
  color: $gray-800;
}

input {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.1rem;
}

.container {
  width: 100%;
  padding-right: $spacer * 0.8;
  padding-left: $spacer * 0.8;
  margin-right: auto;
  margin-left: auto;

  @media (min-width: $sm) {
    max-width: $container-sm;
  }

  @media (min-width: $md) {
    max-width: $container-md;
  }

  @media (min-width: $lg) {
    max-width: $container-lg;
  }

  @media (min-width: $xl) {
    max-width: $container-xl;
  }
}

.container-narrow {
  @media (min-width: $xl) {
    max-width: $container-lg;
  }
}

.img-fluid {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: $primary;

  &:hover {
    text-decoration: underline;
    color: color.adjust($primary, $lightness: -10%);
  }
}

img {
  vertical-align: middle;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

code, pre {
  font-family: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

p code {
  display: inline-flex;
  max-width: 100%;
  overflow: auto;
}

@include heading-anchor("heading-anchor");
